<template>
  <el-card>
    <div class="home">
      <img :src="userStore.userInfo.avatar" class="userAvatar" />
      <div class="home-text">
        <h3 class="home-hello">
          {{ getTime() }}好,{{ userStore.userInfo.name }}
        </h3>
        <span class="home-title">{{ logoConfig.title }}</span>
      </div>
    </div>
  </el-card>
  <div class="svg">
    <SvgIcon name="welcome" width="600px" height="600px"></SvgIcon>
  </div>

</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user.ts'
import { getTime } from '../../utils/time.ts'
import logoConfig from '@/config/logoConfig.ts'
import SvgIcon from '@/components/SvgIcon/index.vue'

let userStore = useUserStore()
</script>

<style scoped lang="scss">
.home {
  display: flex;
  align-items: center;
  .userAvatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
  }
  .home-text {
    display: flex;
    flex-direction: column;
    .home-hello {
      font-size: 20px;
      font-weight: bolder;
    }

    .home-title {
      font-style: italic;
      margin-top: 10px;
    }
  }
}

.svg {
  display: flex;
  justify-content: center;
}
</style>
